---
title: 'Theme'
description: 'Learn how to customize the appearance of the Schedule-X calendar'
---

# 💅 Theme

You are not required to use any of the styles from the `@schedule-x/theme-default` package. If you are up for it, you can
create your own theme from scratch, or just override rules of the default theme. If you do so, however, you might want to pin
your schedule-x dependencies to a specific version, to avoid unexpected updates that might break your custom styles.

## Shadcn Theme

For apps that are using Shadcn with its default design, you may want to use `@schedule-x/theme-shadcn`.

[Demo app](https://schedule-x-shadcn.vercel.app/)

import {Callout} from "nextra/components";

<Callout type="info">
  Schedule-X is in no way affiliated with Shadcn, and this theme is not an official Shadcn software. It is merely a theme
  for Schedule-X that is designed to match with the Shadcn design.
</Callout>

```bash copy
npm i @schedule-x/theme-shadcn
```

```tsx
import '@schedule-x/theme-shadcn/dist/index.css'
import { createCalendar } from '@schedule-x/calendar'

const calendar = createCalendar({
  // ... other config,
  theme: 'shadcn'
})
```

## Customizing the default theme colors

Schedule-X uses global CSS variables to define colors. Therefore, you can
override the following CSS variables to customize the colors of the default theme:

```css
:root {
  --sx-color-primary: #6750a4;
  --sx-color-on-primary: #fff;
  --sx-color-primary-container: #eaddff;
  --sx-color-on-primary-container: #21005e;
  --sx-color-secondary: #625b71;
  --sx-color-on-secondary: #fff;
  --sx-color-secondary-container: #e8def8;
  --sx-color-on-secondary-container: #1e192b;
  --sx-color-tertiary: #7d5260;
  --sx-color-on-tertiary: #fff;
  --sx-color-tertiary-container: #ffd8e4;
  --sx-color-on-tertiary-container: #370b1e;
  --sx-color-surface: #fef7ff;
  --sx-color-surface-dim: #ded8e1;
  --sx-color-surface-bright: #fef7ff;
  --sx-color-on-surface: #1c1b1f;
  --sx-color-surface-container: #f3edf7;
  --sx-color-surface-container-low: #f7f2fa;
  --sx-color-surface-container-high: #ece6f0;
  --sx-color-background: #fff; // deviation from material 3, which would be #FEF7FF
  --sx-color-on-background: #1c1b1f;
  --sx-color-outline: #79747e;
  --sx-color-outline-variant: #c4c7c5;
  --sx-color-shadow: #000;
  --sx-color-surface-tint: #6750a4;
  --sx-color-neutral: var(--sx-color-outline);
  --sx-color-neutral-variant: var(--sx-color-outline-variant);

  // internally defined colors, not belonging to the material design spec
  --sx-internal-color-gray-ripple-background: #e0e0e0;
  --sx-internal-color-light-gray: #fafafa;
  --sx-internal-color-text: #000;
}
```
